import { Outlet, NavLink } from 'react-router-dom';

export default function App() {
  return (
    <div className="flex min-h-full flex-col">
      <header className="sticky top-0 z-10 bg-white/80 backdrop-blur border-b">
        <div className="mx-auto max-w-screen-md px-4 py-3 flex items-center justify-between">
          <div className="text-lg font-semibold text-brand-700">医疗健康</div>
          <div className="text-xs text-gray-500">预约挂号 · 问诊 · 用药建议</div>
        </div>
      </header>

      <main className="mx-auto w-full max-w-screen-md flex-1 px-4 pb-20 pt-4">
        <Outlet />
      </main>

      <nav className="safe-area fixed inset-x-0 bottom-0 z-10 bg-white/90 backdrop-blur border-t">
        <div className="mx-auto max-w-screen-md grid grid-cols-5 text-xs">
          <Tab to="/" label="首页" icon="🏠" />
          <Tab to="/appointment" label="挂号" icon="📅" />
          <Tab to="/consultation" label="问诊" icon="💬" />
          <Tab to="/symptoms" label="自查" icon="🩺" />
          <Tab to="/profile" label="我的" icon="👤" />
        </div>
      </nav>
    </div>
  );
}

function Tab({ to, label, icon }: { to: string; label: string; icon: string }) {
  return (
    <NavLink
      to={to}
      className={({ isActive }) =>
        `flex flex-col items-center justify-center py-2 ${
          isActive ? 'text-brand-600' : 'text-gray-500'
        }`
      }
      end={to === '/'}
    >
      <span className="text-lg leading-none">{icon}</span>
      <span className="mt-0.5">{label}</span>
    </NavLink>
  );
}


